//这里生成DOM
function generate(json, par) {
    for (var attr in json) {
        var ele = document.createElement('li');
        if (!json[attr])
            ele.innerHTML = ' <input type="checkbox"></input>' + attr;
        else {
            ele.innerHTML = '<span><span class="switch-close" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>' + attr + '</span>';
            var nextpar = document.createElement('ul');
            ele.appendChild(nextpar);
            generate(json[attr], nextpar);
        }
        par.appendChild(ele);
    }
}

generate(json, document.getElementById('container'));

//处理展开和收起
function toggle(eve) {
    var par = eve.parentNode.nextElementSibling;
    if (par.style.display == 'none') {
        par.style.display = 'block';
        eve.className = 'switch-open';

    } else {
        par.style.display = 'none';
        eve.className = 'switch-close';
    }
}

//处理全部勾选和全部不选
function checkChange(eve) {
    var oul = eve.parentNode.nextElementSibling;
    if (eve.checked) {
        for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
            oul.querySelectorAll('input')[i].checked = true;
        }
    } else {
        for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
            oul.querySelectorAll('input')[i].checked = false;
        }
    }
}